<script setup lang='ts'>
import { ref } from 'vue';
import mitter from "@/utils/mitt";
import { getUserData } from "@/api/api";
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter()
// 定义一个简单的正则表达式来检查邮箱格式  
let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// 定义正则表达式来匹配中国手机号码的格式  
let phoneRegex = /^1[3-9]\d{9}$/;
const name = ref('')
const mail = ref('')
const password = ref('')
const verifyPassword = ref('')
const vx = ref('')
const phone = ref('')
const data = ref()
const sendData = async () => {
    if (!emailRegex.test(mail.value)) return open4('错误', '邮箱格式错误', 'error')
    if (!phoneRegex.test(phone.value)) return open4('错误', '手机号码错误', 'error')
    if (name.value.length <= 0 && name.value === '') return open4('错误', '请输入名字', 'error')
    if (password.value.length <= 5 && password.value === '') return open4('错误', '密码最少输入6位数', 'error')
    if (password.value !== verifyPassword.value) return open4('错误', '请检查检验密码是否跟上面密码相同', 'error')
    data.value = {name,mail,password,vx,phone}
    const res = await getUserData(data.value)
    if(res.data.code !== '200') return open4('错误', res.data.msg, 'error')
    mitter.emit('steps', 1)
    router.push({ name: 'userMailCode', query: data.value })
}

const open4 = (title: string, message: string, type: any) => {
    ElNotification({
        title,
        message,
        type,
    })
}
</script>

<template>
    <div class="content1">
        <div class="inp">
            <div class="input">
                <div class="h4">
                    <h4>名字：</h4>
                </div>
                <el-input v-model="name" maxlength="5" placeholder="请输入名字（最多5个字）" />
            </div>
            <div class="input">
                <div class="h4">
                    <h4>邮箱：</h4>
                </div>
                <el-input v-model="mail" placeholder="请输入邮箱" />
            </div>
            <div class="input">
                <div class="h4">
                    <h4>密码：</h4>
                </div>
                <el-input v-model="password" show-password maxlength="10" placeholder="请输入密码" />
            </div>
            <div class="input">
                <div class="h4">
                    <h4>校验密码：</h4>
                </div>
                <el-input v-model="verifyPassword" show-password placeholder="请输入再次密码（跟上面密码相同）" />
            </div>
            <div class="input">
                <div class="h4">
                    <h4>联系微信：</h4>
                </div>
                <el-input v-model="vx" placeholder="请输入微信（注意：与下列号码一致，不然无法与投手取得联系）" />
            </div>
            <div class="input">
                <div class="h4">
                    <h4>联系电话：</h4>
                </div>
                <el-input v-model="phone" placeholder="请输入联系号码（注意：请填写真实号码，不然无法与投手取得联系）" />
            </div>
            <div class="btn">
                <el-button style="width: 200px;" plain @click="sendData">提交</el-button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.content1 {
    width: 1300px;
    margin: auto;
}

.inp {
    width: 800px;
    margin: auto;
    box-sizing: border-box;
    padding: 20px;
}

.h4 {
    width: 100px;
}

.input {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.btn {
    width: 200px;
    margin: auto;
    margin-top: 80px;
}
</style>